<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form >
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="城市名称">
          <a-row :gutter="24">
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-select placeholder="全部省" @change="provinceIdChange" v-model="province">
                <a-select-option :value="item.name" v-for="(item, index) in provinceUl" :idt="item.id" :code="item.val" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-select placeholder="全部市" @change="cityChange" v-model="city" >
                <a-select-option :value="item.name" v-for="(item, index) in cityUl" :idt="item.id" :code="item.val" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-select placeholder="全部区" @change="districtChange" v-model="district">
                <a-select-option :value="item.name" v-for="(item, index) in districtUl" :idt="item.id" :code="item.val" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商圈名">
          <a-row :gutter="24">
            <a-col :xl="16" :lg="16" :md="16" :sm="24">
              <a-input placeholder="请输入商圈名" v-model="areaName" />
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-button @click="searchMap()" type="primary" icon="search">搜索</a-button>
            </a-col>
          </a-row>  
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="经纬度（地图选择）">
          <a-col :xl="11" :lg="11" :md="11" :sm="24">
            <a-input placeholder="请输入经度" v-model="lon" disabled/>
          </a-col>
          <a-col :xl="11" :lg="11" :md="11" :sm="24">
            <a-input placeholder="请输入纬度" v-model="lat" disabled/>
          </a-col>
        </a-form-item>
        <MapContainer ref="mapForm" @dragendMap="dragendMap"></MapContainer>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/common/businessArea';
import ImageUpload from '@/components/ImageUpload';
import MapContainer from '@/views/components/meizong/MapContainer';
import { Slime } from '@/mixins/slime';
export default {
  name: 'cityModal',
  mixins: [Slime],
  components: {
    ImageUpload,
    MapContainer,
  },
  data() {
    return {
      title: '操作',
      id: 0,
      provinceUl: [],
      province:'',
      provinceName:'',
      provinceId:'',
      cityUl: [],
      city:'',
      cityName:'',
      cityId:'',
      districtUl: [],
      district:'',
      districtName:'',
      districtId:'',

      cityDisabled:false,

      areaName:'',
      lon:'',
      lat:'',
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      ApiTree.regionList(0)
        .then((res) => {
          let provinceUl = []
          let data = res.result
          data.map((obj)=>{
            let li = {
              name: obj.name,
              id: obj.id,
              val: obj.code,
            }
            provinceUl.push(li)
          })
          this.provinceUl = provinceUl
        })
        .finally(() => {});
    },
    provinceIdChange(value, option) {
      let provinceId = option.data.attrs.idt;
      let provinceCode = option.data.attrs.code;
      this.provinceName = value
      this.provinceId = provinceCode
      ApiTree.regionList(provinceId)
      .then((res) => {
          let cityUl = []
          let data = res.result
          data.map((obj)=>{
            let li = {
              name: obj.name,
              id: obj.id,
              val: obj.code,
            }
            cityUl.push(li)
          })
          this.cityUl = cityUl
        })
        .finally(() => {});
    },
    cityChange(value, option) {
      let cityId = option.data.attrs.idt;
      let cityCode = option.data.attrs.code;
      this.cityName = value
      this.cityId = cityCode
      ApiTree.regionList(cityId)
      .then((res) => {
          let districtUl = []
          let data = res.result
          data.map((obj)=>{
            let li = {
              name: obj.name,
              id: obj.id,
              val: obj.code,
            }
            districtUl.push(li)
          })
          this.districtUl = districtUl
        })
        .finally(() => {});
    },
    districtChange(value, option){
      let districtCode = option.data.attrs.code;
      this.districtName = value
      this.districtId = districtCode
    },
    // 增
    crudCreate() {
      this.crudUpdate({});
    },
    // 改
    crudUpdate(record) {
      this.visible = true;
      if(!record.id){
        this.province = ''
        this.provinceName = ''
        this.provinceId = null;
        this.city = ''
        this.cityName = ''
        this.cityId = null;
        this.district = ''
        this.districtName = ''
        this.districtId = null;

        this.areaName = ''
        this.lon = '';
        this.lat = ''
        this.id = null
        return false
      }
      this.province = record.provinceName
      this.provinceName = record.provinceName
      this.provinceId = record.provinceId;
      this.city = record.cityName
      this.cityName = record.cityName
      this.cityId = record.cityId;
      this.district = record.districtName
      this.districtName = record.districtName
      this.districtId = record.districtId;

      this.areaName = record.name
      this.lon = record.lon;
      this.lat = record.lat
      this.id = record.id
      setTimeout(() => {
        this.$refs.mapForm.editMap(record)
      }, 500);
      // if(record.id){
      //   this.cityDisabled = true
      // }else{
      //   this.cityDisabled = false
      // }
    },
    // 提交
    handleOk() {
      const that = this;
      if(that.areaName == ''){
        that.$message.warning('请输入商圈名称');
        return false
      }
      if(that.lon == ''){
        that.$message.warning('请在地图内选择商圈');
        return false
      }
      that.confirmLoading = true;
      let param = {
        provinceName: that.provinceName,
        provinceId: that.provinceId,
        cityName: that.cityName,
        cityId: that.cityId,
        districtName: that.districtName,
        districtId: that.districtId,
        name:that.areaName,
        lon:that.lon,
        lat:that.lat,
      };
      if (!that.id) {
        that.submitCreate(param);
      } else {
        that.submitUpdate(param);
      }
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree.getAdd(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      param = {
        ...param,
        id: that.id,
      }
      ApiTree.getUpdate(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    handleCancel() {
      this.closeModal();
    },
    // 弹窗-关闭
    closeModal() {
      this.cityUl = []
      this.confirmLoading = false;

      this.visible = false;
      this.$emit('closeModal');
    },
    //搜索地图
    searchMap(){
      let searchVal = this.areaName
      let cityName = this.city
      this.$refs.mapForm.initMap(searchVal, cityName)
    },
    //移动坐标
    dragendMap(res){
      this.lon = res.lng
      this.lat = res.lat
    },
  },
};
</script>

<style lang="less" scoped>
</style>